<template>
    <el-dialog v-model="props.dialogVisible" :title="form.id ? '编辑菜单' : '新增菜单'" width="50%" draggable
        :before-close="closeDialog">
        <el-form :model="form" label-width="120px" ref="formRef" :rules="rules">
            <el-row>
                <el-col :lg="11">
                    <el-form-item label="父级菜单" prop="pid">
                        <el-tree-select clearable :props="{ value: 'id', label: 'name' }" style="width:100%;"
                            v-model="form.pid" :data="routerMap" check-strictly :render-after-expand="false" />
                    </el-form-item>
                </el-col>
                <el-col :lg="11">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="form.name" clearable />
                    </el-form-item>
                </el-col>
                <el-col :lg="11">
                    <el-form-item label="菜单类型" prop="type">
                        <el-select v-model="form.type" style="width: 100%;" @change="form.path = ''" placeholder="请选择" clearable>
                            <el-option label="导航菜单" :value="0" />
                            <el-option label="按钮" :value="1" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :lg="11">
                    <el-form-item label="绑定页面" prop="path" v-if="form.type === 0">
                        <el-cascader style="width: 100%;" v-model="form.path" :options="menuOptions"
                            :props="{ label: 'name', value: 'path', checkStrictly: true }" />
                    </el-form-item>
                </el-col>
                <el-col :lg="11" v-if="form.type === 1">
                    <el-form-item label="绑定字段" prop="path">
                        <el-input v-model="form.path" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleSave()">保存</el-button>
                <el-button @click="closeDialog">
                    关闭
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script  lang="ts" setup >
import { reactive, ref, watch } from 'vue'

import { menuTreeData, menuTreeInsert, menuTreeUpdate } from '@/api/menu/index'

import { ElMessage, FormRules } from 'element-plus';
import { asyncRouterMap } from '@/router'
const props = defineProps({
    dialogVisible: {}
})
interface RuleForm {
    name: string
    path: string
    type: string
}
let menuOptions = asyncRouterMap

let routerMap = ref([])
const formRef = ref()
const form = reactive({
    id: '',
    name: '',
    icon: '',
    type: 0,
    path: [],
    pid: '',
})

const rules = reactive<FormRules<RuleForm>>({
    name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
    path: [{ required: true, message: '请输入绑定字段', trigger: 'blur' }],
    type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
})
const emit = defineEmits(['closeDialog', 'saveSuccess'])
const closeDialog = () => {
    formRef.value.resetFields()
    form.id = ''
    console.log(form)
    emit('closeDialog')
}

const getTree = async () => {
    let res = await menuTreeData({})
    console.log('树形数据', res)
    routerMap.value = res.data.list
}


const handleSave = () => {
    if (form.type===0) {
        if (form.path.length) {
            let pathString = '';
            form.path.forEach((item, index) => {
                if (index) {
                    item = '/' + item
                }
                pathString += item
            })
            form.path = pathString
        }
    }



    formRef.value.validate(async valid => {
        if (valid) {
            let res = '';
            if (form.id) {
                res = await menuTreeUpdate(form);
            } else {
                res = await menuTreeInsert(form);
            }
            console.log(res)
            if (res) {
                ElMessage({ message: '操作成功', type: 'success' })
                emit('saveSuccess')
                closeDialog()
            }
        } else {
            return false
        }
    })

}

watch(() => props.dialogVisible, (newValue) => {
    if (newValue) {
        getTree()
        console.log(menuOptions)
    }
}, { immediate: true, deep: true })

defineExpose({
    form
})
</script>
